import classNames from "classnames";
import "./index.scss";
import { useMemo, useState } from "react";
import { billTypeToName } from "@/记账本功能使用/constants/index";
import Icon from "../components/icon";
const DailyBill = ({ date, list }) => {
  // console.log(billTypeToName);
  // console.log(list,'月度单日账单');
  const listData = useMemo(() => {
    const pay = list
      .filter((item) => item.type === "pay")
      .reduce((a, c) => a + c.money, 0);
    const income = list
      .filter((item) => item.type === "income")
      .reduce((a, c) => a + c.money, 0);

    return {
      pay,
      income,
      total: pay + income,
    };
  }, [list]);

  const [dataVisible, setdataVisible] = useState(false);

  const show = () => {
    setdataVisible(!dataVisible);
  };
  return (
    <div className={classNames("dailyBill")}>
      <div className="header">
        <div className="dateIcon" onClick={show}>
          <span className="date">{date}</span>
          <span className={classNames("arrow", { expand: dataVisible })}></span>
        </div>
        <div className="oneLineOverview">
          <div className="pay">
            <span className="type">支出</span>
            <span className="money">{listData.pay.toFixed(2)}</span>
          </div>
          <div className="income">
            <span className="type">收入</span>
            <span className="money">{listData.income.toFixed(2)}</span>
          </div>
          <div className="balance">
            <span className="money">{listData.total.toFixed(2)}</span>
            <span className="type">结余</span>
          </div>
        </div>
      </div>
      {/* 单日列表 */}
      {dataVisible && (
        <div className="billList">
          {list.map((item) => {
            return (
              <div className="bill" key={item.id}>
                <div className="detail">
                  <div className="billType">
                    <Icon type={item.useFor} />
                    <span style={{ marginLeft: "15px" }}>
                      {billTypeToName[item.useFor]}
                    </span>
                  </div>
                </div>
                <div className={classNames("money", item.type)}>
                  {item.money.toFixed(2)}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};
export default DailyBill;
